<template>
	<view class="">
				<image src="https://renovationcdn.jiachuangnet.com/talentPool/bg6.png"
					style="width: 100%;height:363rpx;position: absolute;top:0;left:0;z-index: 10"></image>
				<view style="position: absolute;width:700rpx;left:25rpx;top:80rpx;z-index: 11;padding-bottom: 100rpx;">
					<view style="width: 400rpx; background:white;border-radius: 40rpx;margin:0 auto;">
						<u--input v-model='nickName' @change="deChange" placeholder="请输入师傅姓名" prefixIcon="search"
							prefixIconStyle="font-size: 22px;color: #909399" ></u--input>
					</view>
					<u-tabs   lineColor='#13989A' :activeStyle="{'fontSize':'32rpx','color':'#1E272E','fontWeight':'700'}"
						:inactiveStyle="{'fontSize':'26rpx'}" :list="roleList" @click="changeRoleId" :scrollable='true'
						style="position: sticky;top:100rpx" :current="currIndex" ></u-tabs>
					

					<view class="content">
						<view v-for="(v,i) in talentList" :key="i" class="item" @click="toPath(v.userId)">
							<view class="master_wrapper ">
								<view class="master_left">
									<image :src="'https://'+v.avatar" mode="" style="width: 108rpx;height: 108rpx;border-radius: 50%;" ></image>
								</view>
								<view class="master_right">
									<view class="flex" style="padding: 11rpx 0;">
										<view class="flex" style="width: 350rpx;">
											<text class="name">{{v.nickName}}</text>
											<text class="post">{{v.roleName}}</text>
											<span class="verity">已实名</span>
										</view>
										<u-icon name="arrow-right"></u-icon>
									</view>
									<view class="flex" style="padding: 11rpx 0;">
										<view class="flex" style="justify-content: start;vertical-align: middle;">
											<u-icon name="phone-fill" color="#f79e1b" style="width: 24rpx;justify-content: start;height: 26rpx;"></u-icon>
											<text class="phone text" style="padding-right: 25rpx;">电话:{{v.phone}}</text>
										</view>
										<view class="flex">
											<image src="https://renovationcdn.jiachuangnet.com/talentPool/zhengshu.png" mode="" style="width: 24rpx;height: 28rpx;"></image>
											<span class="verity_text" style="padding-left: 10rpx;">技能证书</span>
										</view>
									</view>
									<view class="introduce" style="padding: 11rpx 0;">
										{{v.introduction}}
									</view>
									<view class="flex" style="padding: 11rpx 0;justify-content: start;">
										<text class="text" style="padding-right: 25rpx;">评分</text>
										<view class="flex">
											<u-icon name="star-fill" color="#F79E1B" size="24" v-for="j in v.allStar" :key="j"></u-icon>
											<img src="https://renovationcdn.jiachuangnet.com/talentPool/star%2018.png" v-if="v.halfStar" alt="" style="width: 20px;height: 20px;">
											<u-icon name="star-fill" color="#fcd8a4" size="24" v-for="h in v.noStar" :key="h" ></u-icon>
										</view>
									</view>
									<view class="flex">
										<view class="text">
											订单量:{{v.orderNum}}个
										</view>
										<view class="text" v-show="longitude&&latitude">
											距离:{{v.km}}Km
										</view>
									</view>
								</view>
							</view>
						</view>
						<view style="width: 100%;height: 50vh;" v-if="talentList.length===0">
							<u-empty
							        icon="https://renovationcdn.jiachuangnet.com/empty.jpg"
									width="100%"
									height="100%"
									:text="isLogin?'数据为空':'请先登录'"
							>
							</u-empty>
						</view>
					</view>
				</view>
				<newTabbar  v-if="tabbarShow" :index="tabbarList.length == 4 ? 2 :1"  style="position: fixed;top:0;bottom:0;z-index:10000000" :tabbarList="tabbarList" :time="new Date().getTime()" ></newTabbar>
	</view>
</template>

<script>
	import newTabbar from '@/components/newTabbar/index.vue'
	export default{
		components:{
			newTabbar
		},
		data() {
			return {
				 tabbarList: [{
				 		'text': '首页',
				 		'path': 'settled',
				 		'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/indexed.png',
				 		'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/index.png',
				 		'name': '首页'
				 	},
				 	{
				 		'text': '我的',
				 		'path': 'mine',
				 		'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/mined.png',
				 		'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/mine.png',
				 		'name': '我的'
				 	}
				 ],
				 tabbarShow:false,
				 roleList:null,
				 initRoleList:null,
				loginType:null,
				isLogin:'',
				color: '#c7ccd3',
				currentRoleId:0,
				pageNumber:1,
				pageSize:10,
				nickName:'',
				talentList:[],
				timer:null,
				currIndex:0,
				toPathQeuryName:null,
				longitude:0,
				latitude:0,
			}
		},
		onShow(){
			var app = getApp()
			this.talentList=[]
			 const worker = {
			 	'text': '人才库',
			 	'path': 'talentPool',
			 	'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/worked.png',
			 	'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/worker.png',
			 	'name': '人才库'
			 }
			 const shop = {
			 	'text': '店铺管理',
			 	'path': 'manageStore',
			 	'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/jiankonged.png',
			 	'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/jiankong.png',
			 	'name': '店铺管理'
			 }
			 const jianliStoreManage = {
			 	'text': '店铺管理',
			 	'path': 'jianliStoreManage',
			 	'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/jiankonged.png',
			 	'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/jiankong.png',
			 	'name': '店铺管理'
			 }
			 const  shopmanager = {
			 	'text': '店铺管理',
			 	'path': 'storeManage',
			 	'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/jiankonged.png',
			 	'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/jiankong.png',
			 	'name': '店铺管理'
			 }
			 uni.getStorage({
			 	key: 'loginType',
			 	success: (res) => {
			 		 
			 		const loginType = res.data;
			 		if (loginType === 0 || loginType === 2 || loginType === 7||loginType === 10) {
			 			//  监理 
			 			if(loginType === 2){
			 				this.tabbarList.splice(1, 0, jianliStoreManage);
			 			}else{
			 				// 超管  品排方
			 				this.tabbarList.splice(1, 0, shop);
			 			}
			 			this.tabbarList.splice(2, 0, worker);
			 		}
			 		if (loginType === 1) {
			 			// 装修公司管理员
			 			this.tabbarList.splice(1, 0, worker);
			 		}
			 		if(loginType === 4){
			 			//  加盟商
			 			this.tabbarList.splice(1, 0, shopmanager);
			 		}
			 		if(loginType === 3){
			 			// 4项目经理
			 			this.tabbarList.splice(1, 0, worker);
			 		}
			 		this.tabbarShow = true;
			 	}
			 })
			if(app.globalData.rootName){
				this.toPathQeuryName=app.globalData.rootName
				app.globalData.rootName=''
			}
			this.userName = uni.getStorageSync('userName');
			this.getRoleId()
			this.loginType= uni.getStorageSync('loginType')
			this.isLogin= uni.getStorageSync('isLogin')==='yes'?true:false
			uni.getLocation({
			  type: 'wgs84', // 坐标类型，默认为wgs84，可选的值为gcj02和bd09ll
			  success: res => {
			    // 获取成功，经度和纬度在res.longitude和res.latitude中
				this.longitude=res.longitude
				this.latitude=res.latitude
			  },
			  fail: err => {
			    // 获取失败，err为错误信息
			    console.log('getLocation err:', err);
			  }
			});
		},
		onHide() {
			 
			this.tabbarList =  [{
				 		'text': '首页',
				 		'path': 'settled',
				 		'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/indexed.png',
				 		'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/index.png',
				 		'name': '首页'
				 	},
				 	{
				 		'text': '我的',
				 		'path': 'mine',
				 		'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/mined.png',
				 		'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/mine.png',
				 		'name': '我的'
				 	}
				 ]
			
		},
		onUnload(){
			// this.tabbarList = this.$options.data(this).tabbarList;
		 
			this.tabbarList =  [{
				 		'text': '首页',
				 		'path': 'settled',
				 		'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/indexed.png',
				 		'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/index.png',
				 		'name': '首页'
				 	},
				 	{
				 		'text': '我的',
				 		'path': 'mine',
				 		'activeIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/mined.png',
				 		'inactiveIcon': 'https://renovationcdn.jiachuangnet.com/tabbarIcon/mine.png',
				 		'name': '我的'
				 	}
				 ]
			 
		},
		onLoad(query) {
			// if(query.name){
			// 	this.toPathQeuryName=query.name
			// }
					
				},
				onReachBottom() {
					this.pageNumber++;
					this.getTalentList()
				},
				methods: {
					// 根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
					getDistances(lat2, lng2) {
						console.log(this.latitude,this.longitude)
						if(this.latitude&&this.longitude){
							let EARTH_RADIUS = 6378.137;// 地球半径
							let radLat1 = this.latitude * Math.PI / 180.0; //lat1 * Math.PI / 180.0=>弧度计算
							let radLat2 = lat2 * Math.PI / 180.0;
							let a = radLat1 - radLat2;
							let b = this.longitude * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
							let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
							s = s * EARTH_RADIUS; 
							s = Math.round(s * 10000) / 10000;// 输出为公里
							return { m: s * 1000, km: Number(s.toFixed(2)) }
						}else{
							return { m: 0, km: 0 }
						}
						
					},

					toPath(id){
						uni.navigateTo({
							url:`/pages/talentDetails/index?userId=${id}`
						})
					},
					deChange(){
						uni.$u.debounce(this.change, 1000)
						
					},
					change(){
						this.pageNumber=1
						this.talentList=[]
						this.getTalentList()
					},
					getTalentList(){
						console.log(this.isLogin)
						if(!this.isLogin) return
						return uni.$u.http.get('/talent/getTalentList',{
							params:{
								pageNumber:this.pageNumber,
								pageSize:this.pageSize,
								roleId:this.currentRoleId,
								nickName:this.nickName
							}
						}).then((res)=>{
							if(res){
								const handlerScoreAfterObj=res.map(item=>{
									if(item.score==0){
										item.allStar=0
										item.noStar=5
										item.halfStar=0
									}else{
										const v = item.score.toString().split('.')
										item.allStar=Number(v[0]); 
										if(v[1]&&v[1]!=0){
											item.halfStar=1
										}else{
											item.halfStar=0
										}
										item.noStar=5-(item.allStar+item.halfStar)>0?5-item.allStar:0
									}
									item.km=this.getDistances(item.latitude,item.longitude).km||0
									return item
								})
								this.talentList=[...this.talentList,...handlerScoreAfterObj]
							}
						})
					},
					getRoleId(){
						return uni.$u.http.get('/talent/getRoleId').then((res)=>{
							this.roleList=res.map(item=>{
								 return {
									name:item.roleName,
								}
								
							})
							
							if(this.toPathQeuryName){
								const result= res.find(v=>v.roleName==this.toPathQeuryName)
								if(result){
									this.currentRoleId=result.roleId
									this.currIndex=res.findIndex(v=>v.roleName==this.toPathQeuryName)
									this.initRoleList=res
									this.getTalentList()
								}else{
									this.currIndex=0
									this.currentRoleId=res[0].roleId
									this.initRoleList=res
									this.getTalentList()
								}
							}else{
								this.currIndex=0
								this.currentRoleId=res[0].roleId
								this.initRoleList=res
								this.getTalentList()
							}
							
							
						})
					},
					changeRoleId(e){
						this.currIndex=e.index
						this.currentRoleId=this.initRoleList[e.index].roleId
						this.pageNumber=1
						this.talentList=[]
						this.getTalentList()
					}
		
				}
	}
</script>

<style>
page{
background:#f8f8f8;
}
</style>
<style lang="scss" scoped>
	.phone{
		
	}
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.border {
		border: 1rpx solid #eee;
		border-radius: 40rpx;
		overflow: hidden;
	}
	.content {
		width: 700rpx;
		margin: 0 auto;
	}

	.item {
		width: 660rpx;
		padding: 20rpx;
		background-color: white;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		margin-top: 20rpx;
		border-radius: 10rpx;
	}

	.label {
		color: #999;
		width: 180rpx;
		font-size: 28rpx;
		font-weight: 400;
	}

	.val {
		color: #333;
		font-size: 28rpx;
		max-width: 70%;
	}

	.master_wrapper{
		display: flex;
		padding: 10rpx 11rpx;
		.master_left{
			flex:1;
			margin-top: 11rpx;
		}
		.master_right{
			.text{
				font-weight: 500;
				font-size: 28rpx;
				color: #1E272E;
			}
			width: 560rpx;
			padding-left: 16rpx;
			.name{
				font-weight: bold;
				font-size: 30rpx;
				color: #1E272E;
			}
			.post{
				font-weight: 500;
				font-size: 26rpx;
				color: #1E272E;
			}
			.verity{
				width: 86rpx;
				line-height: 38rpx;
				background: #13989A;
				border-radius: 10rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
			}
			.introduce{
				font-weight: 500;
				font-size: 26rpx;
				color: #8A8A8A;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		
	}
</style>